<template>
  <div class="student-home">
    <StudentNavbar title="学生首页" />
    
    <div class="dashboard-header">
      <h1 class="welcome-title">欢迎回来，{{ username }}同学</h1>
      <p class="welcome-subtitle">在这里开启你的智能学习之旅</p>
    </div>

    <div class="dashboard-stats">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="stat-card">
            <div class="stat-icon bg-primary">
              <i class="el-icon-document"></i>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ examCount }}</div>
              <div class="stat-label">总考试数</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="stat-card">
            <div class="stat-icon bg-success">
              <i class="el-icon-check"></i>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ completedExams }}</div>
              <div class="stat-label">已完成</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="stat-card">
            <div class="stat-icon bg-warning">
              <i class="el-icon-time"></i>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ pendingExams }}</div>
              <div class="stat-label">待完成</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 正在进行的考试 -->
    <div v-if="loading" class="loading-placeholder">
      <i class="el-icon-loading"></i> 正在加载正在进行的考试...
    </div>
    
    <el-alert 
      v-else-if="error" 
      :title="error" 
      type="error" 
      show-icon
      class="error-alert"
    ></el-alert>
    
    <el-card class="examings-card" v-else-if="examings && examings.length > 0">
      <template #header>
        <div class="card-header">
          <span>正在进行的考试</span>
        </div>
      </template>
      <div class="examings-grid">
        <div 
          class="examing-card" 
          v-for="exam in examings" 
          :key="exam.subjectId"
          @click="goToTakeExam(exam.subjectId)"
        >
          <div class="examing-icon">
            <i class="el-icon-edit"></i>
          </div>
          <div class="examing-info">
            <h3 class="examing-title">{{ exam.subjectName }}</h3>
            <div class="examing-details">
              <p><i class="el-icon-clock"></i> 限时: {{ exam.timeLimit }}分钟</p>
              <p><i class="el-icon-edit-outline"></i> 选择题: {{ exam.choiceQuestionCount }}题</p>
              <p><i class="el-icon-help"></i> 判断题: {{ exam.judgmentQuestionCount }}题</p>
              <p><i class="el-icon-edit"></i> 填空题: {{ exam.fillQuestionCount }}题</p>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="student-functions">
      <template #header>
        <div class="card-header">
          <span>核心功能</span>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="function-card" @click="goToTeachers">
            <div class="function-icon">
              <i class="el-icon-user"></i>
            </div>
            <div class="function-title">老师列表</div>
            <div class="function-desc">查看所有任课老师信息</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="function-card" @click="goToExamRecords">
            <div class="function-icon">
              <i class="el-icon-tickets"></i>
            </div>
            <div class="function-title">考试记录</div>
            <div class="function-desc">查看历史考试成绩与分析</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="function-card" @click="goToNoExamList">
            <div class="function-icon">
              <i class="el-icon-edit-outline"></i>
            </div>
            <div class="function-title">参加考试</div>
            <div class="function-desc">查看并参加未完成的考试</div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="quick-actions">
      <template #header>
        <div class="card-header">
          <span>快捷操作</span>
        </div>
      </template>
      <div class="quick-actions-content">
        <el-button type="primary" @click="goToNoExamList" icon="el-icon-edit-outline">
          立即考试
        </el-button>
        <el-button type="success" @click="goToExamRecords" icon="el-icon-data-analysis">
          成绩分析
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import StudentAPI from '@/api/student'
import StudentNavbar from '@/components/StudentNavbar.vue'

export default {
  name: 'StudentIndex',
  components: {
    StudentNavbar
  },
  data() {
    return {
      username: '',
      examCount: 12,
      completedExams: 8,
      pendingExams: 4,
      examings: [], // 正在进行的考试
      loading: false,
      error: null
    }
  },
  created() {
    // 从localStorage获取用户信息
    const userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      try {
        const user = JSON.parse(userInfo)
        this.username = user.username
      } catch (e) {
        console.error('解析用户信息失败:', e)
      }
    }
    
    // 获取正在进行的考试
    this.fetchExamings()
  },
  methods: {
    // 获取正在进行的考试
    async fetchExamings() {
      this.loading = true
      this.error = null
      try {
        const res = await StudentAPI.getExamings()
        console.log('获取正在进行的考试响应:', res)
        if (res.data.code === 200 && res.data.msg === 'success') {
          this.examings = res.data.data || []
          console.log('正在进行的考试数据:', this.examings)
        } else {
          this.error = '获取正在进行的考试失败: ' + (res.data.message || '未知错误')
          console.error('获取正在进行的考试失败:', res.data.message)
        }
      } catch (error) {
        this.error = '获取正在进行的考试时发生网络错误'
        console.error('获取正在进行的考试失败:', error)
      } finally {
        this.loading = false
      }
    },
    
    goToTeachers() {
      this.$router.push('/student/teachers')
    },
    goToExamRecords() {
      this.$router.push('/student/exam-records')
    },
    goToNoExamList() {
      this.$router.push('/student/no-exam-list')
    },
    goToTakeExam(subjectId) {
      // 根据经验教训，点击参加考试时应先显示考试信息，再通过"开始考试"按钮调用takeExam接口
      this.$router.push(`/student/take-exam/${subjectId}`)
    }
  }
}
</script>

<style scoped>
.student-home {
  padding: 20px;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  min-height: calc(100vh - 40px);
}

.dashboard-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
}

.welcome-title {
  color: #fff;
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.welcome-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.2rem;
}

.dashboard-stats {
  margin-bottom: 30px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.stat-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
}

.bg-primary {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.bg-success {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.bg-warning {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

.examings-card, .student-functions, .quick-actions {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 30px;
  color: white;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.3rem;
  font-weight: 600;
}

.examings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.examing-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.examing-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.examing-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
  flex-shrink: 0;
}

.examing-info {
  flex: 1;
}

.examing-title {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.examing-details p {
  margin: 5px 0;
  font-size: 0.9rem;
  opacity: 0.9;
  display: flex;
  align-items: center;
}

.examing-details i {
  margin-right: 8px;
  font-size: 1rem;
}

.function-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 25px 15px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 20px;
}

.function-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.function-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.function-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.function-desc {
  font-size: 0.9rem;
  opacity: 0.8;
}

.quick-actions-content {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.quick-actions .el-button {
  padding: 15px 30px;
  font-size: 1.1rem;
  border-radius: 50px;
  border: none;
}

.loading-placeholder {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 30px;
  color: white;
  padding: 30px;
  text-align: center;
  font-size: 1.2rem;
}

.error-alert {
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .welcome-title {
    font-size: 1.8rem;
  }
  
  .stat-card {
    padding: 15px;
  }
  
  .stat-number {
    font-size: 1.5rem;
  }
  
  .function-card {
    padding: 15px 10px;
  }
  
  .quick-actions-content {
    flex-direction: column;
    align-items: center;
  }
  
  .quick-actions .el-button {
    width: 80%;
  }
  
  .examings-grid {
    grid-template-columns: 1fr;
  }
  
  .examing-card {
    flex-direction: column;
    text-align: center;
  }
  
  .examing-icon {
    margin-right: 0;
    margin-bottom: 15px;
  }
}
</style>